import React, { Component } from 'react';
import Paper from 'material-ui/Paper';
import TextField from 'material-ui/TextField';
import RaisedButton from 'material-ui/RaisedButton';
import FlatButton from 'material-ui/FlatButton';
import CircularProgress from 'material-ui/CircularProgress';
import Snackbar from 'material-ui/Snackbar';
import Divider from 'material-ui/Divider';
import Wrapper from '../Welcome/Wrapper';
import BOXSTYLE from './BOXSTYLE';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as actionCreators from '../../redux/actions/ResetAc';
import { errorHandle } from '../Utils/ErrorHandle';

class Reset extends Component {
  constructor(props) {
    super(props);
    this.state = {
      phone: null,
      verification_code: null,
      password: null,
      password_confirmation: null,
      countdown: 90
    }
  }

  tick() {
    if (this.props.isGetCode) {
      this.setState((prevState) => ({
        countdown: prevState.countdown - 1
      }));
    } else {
      this.setState({
        countdown: 90
      });
    }
  }

  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  sendCode(e) {
    e.preventDefault();
    this.props.actions.sendCode(this.state.phone);
  }

  resetComfirm(e) {
    e.preventDefault();
    this.props.actions.comfirm(this.state.phone, this.state.verification_code);
  }

  reset(e) {
    e.preventDefault();
    this.props.actions.reset(this.state.phone, this.state.verification_code, this.state.password, this.state.password_confirmation);
  }

  clear(e) {
    e.preventDefault();
    this.props.actions.clear();
  }

  handleRequestClose = () => {
    this.props.actions.pushTo();
  };

  changeLabel() {
    if (this.props.isGetCoding) {
      return '正在发送 ...';
    } else if (this.props.isGetCode){
      return this.state.countdown + '秒后重新获取';
    } else {
      return '获取验证码';
    }
  }

  render() {
  	return (
      <Wrapper>
        <div style={{display: !this.props.isConfirmed ? 'block' : 'none'}}>
          <Paper style={BOXSTYLE.box}>
            <TextField
              fullWidth={true}
              hintText="手机号码"
              hintStyle={BOXSTYLE.hintStyle}
              underlineShow={false}
              onChange={(e, v) => this.setState({phone: v})}
              errorText={errorHandle(this.props.error, 'phone')}
              errorStyle={BOXSTYLE.errorStyle}
            />
            <Divider />
            <TextField
              fullWidth={true}
              hintText="短信验证码"
              hintStyle={BOXSTYLE.hintStyle}
              underlineShow={false}
              onChange={(e, v) => this.setState({verification_code: v})}
              errorText={errorHandle(this.props.error, 'verification_code')}
              errorStyle={BOXSTYLE.errorStyle}
            />
            <FlatButton 
              style={{marginTop: 8, width: '100%'}}
              label={this.changeLabel()}
              disabled={this.props.isGetCode}
              primary={true} 
              onClick={this.sendCode.bind(this)}
            />
          </Paper>
          <RaisedButton 
            style={BOXSTYLE.btn}
            fullWidth={true}
            label={this.props.isConfirming ? '' : '下一步'}
            primary={true}
            onClick={this.resetComfirm.bind(this)}
            children={this.props.isConfirming 
              ? <CircularProgress style={{margin: 6}} size={24} color="#fff"/> : ''
            }
          />
          <Link to={`/`}>
            <FlatButton 
              style={{width: '100%'}}
              label="返回" 
              primary={true} 
            />
          </Link>
        </div>

        <div style={{display: !this.props.isConfirmed ? 'none' : 'block'}}>
          <Paper style={BOXSTYLE.box}>
            <TextField
              fullWidth={true}
              hintText="新密码"
              hintStyle={BOXSTYLE.hintStyle}
              underlineShow={false}
              type="password"
              onChange={(e, v) => this.setState({password: v})}
              errorText={errorHandle(this.props.error, 'password')}
              errorStyle={BOXSTYLE.errorStyle}
            />
            <Divider />
            <TextField
              fullWidth={true}
              hintText="再输入一遍"
              hintStyle={BOXSTYLE.hintStyle}
              underlineShow={false}
              type="password"
              onChange={(e, v) => this.setState({password_confirmation: v})}
              errorText={errorHandle(this.props.error, 'password_confirmation')}
              errorStyle={BOXSTYLE.errorStyle}
            />
          </Paper>
          <RaisedButton 
            style={BOXSTYLE.btn}
            fullWidth={true}
            label={this.props.isReseting ? '' : '修改'}
            primary={true}
            onClick={this.reset.bind(this)}
            children={this.props.isReseting 
             ? <CircularProgress 
               style={{margin: 6}}
               size={24}
               color="#fff"/> 
             : ''
            }
          />
          <Link to={`/`}>
            <FlatButton 
              style={{width: '100%'}}
              label="返回" 
              primary={true}
              onClick={this.clear.bind(this)}
            />
          </Link>
        </div>
        <Snackbar
          open={this.props.isReseted}
          message="修改成功，请重新登录"
          autoHideDuration={4000}
          onRequestClose={this.handleRequestClose}
        />
      </Wrapper>
  	);
  }
};

const mapStateToProps = (state) => ({
  isGetCoding: state.reset.isGetCoding,
  isGetCode: state.reset.isGetCode,
  isConfirming: state.reset.isConfirming,
  isConfirmed: state.reset.isConfirmed,
  isReseting: state.reset.isReseting,
  isReseted: state.reset.isReseted,
  error: state.reset.error
});

const mapDispatchToProps = (dispatch) => ({
  actions: bindActionCreators(actionCreators, dispatch)
});

export default connect(mapStateToProps, mapDispatchToProps)(Reset);
